import { useState } from 'react';

export default function CollapsePanel({ title, children }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="collapse-panel">
      <div className="collapse-header" onClick={() => setIsOpen(!isOpen)}>
        <span>{title}</span>
        <span className="collapse-icon">{isOpen ? '▼' : '▶'}</span>
      </div>
      <div className={`collapse-content ${isOpen ? 'open' : ''}`}>
        {children}
      </div>
    </div>
  );
}
